<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text1">筛选查询</span>
                <!-- 收起筛选/展开筛选 -->
                <span class="text4" @click="isShow = !isShow">
                    <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
                    <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
                </span>
                <button type="success" class="info" @click="SearchClient">查询结果</button>
            </div>
            <!-- 以下div为筛选查询 -->
            <div class="heade-text" v-show="isShow">
                <el-form ref="form" :model="form" label-width="100px" class="heade-form">
                    <el-form-item label="输入搜索">
                        <el-input v-model="form.input" placeholder="客户名称／联系人／创建人／负责人" style="width: 260px;"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期">
                        <el-col :span="11">   
                            <el-date-picker
                            v-model="form.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                            <!--<el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 200px;"></el-date-picker>-->
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="between">
            <div class="header">
                <span class="text">数据列表</span>
                <el-button type="button" class="info1" @click="dialogVisible = true">添加</el-button>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <el-form ref="form" :model="dept" label-width="80px">
                        <el-form-item label="部门名称">
                            <el-input ></el-input>
                        </el-form-item>
                        <el-form-item label="职能">
                            <el-input ></el-input>
                        </el-form-item>
                    </el-form><span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                <button type="success" class="info">导出</button>
            </div>
            <div class="between-table">
                <el-table :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
                    :cell-style="{ fontSize: '12px', textAlign: 'center' }" ref="multipleTable" :data="tableData" border
                    tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <!-- <el-table-column type="selection"></el-table-column> -->
                    <!-- 
                        客户名称
                        客户类型
                        联系人
                        手机号
                        地址
                        创建人
                        负责人
                        创建时间
                        操作 -->
                    <el-table-column prop="clientName" label="客户名称"></el-table-column>
                    <el-table-column prop="clientType" label="客户类型"></el-table-column>
                    <el-table-column prop="contact" label="联系人"></el-table-column>
                    <el-table-column prop="phone" label="手机号"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                    <el-table-column prop="createdName" label="创建人"></el-table-column>
                    <el-table-column prop="headName" label="负责人"></el-table-column>
                    <el-table-column prop="createdTime" label="创建时间" width="150">
                        <template slot-scope="scope">
                            <span>
                                {{ scope.row.createTime}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="option" label="操作"><span class="column">编辑</span><span
                            class="column">预览</span><br /><span class="column">删除</span></el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex; ">
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="currentPage3" :page-size="2" layout="prev, pager, next, jumper"
                            :total="clientList.length"
                            style="margin-left: 0px; margin-top: 20px; display: flex; justify-content: flex-end; width: 100%; margin-right: 20px;" background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { addClient, findClient, findClientBySearch } from '@/api/client.js';
export default {
    data() {
        return {
            isShow: true,
            dialogVisible: false,
            form: {
                input: '',
                phone: '',
                date: ''
            },
            clientList: [],
            tableData: [],
            multipleSelection: [],
        }
    },
    created() {
        this.findClient();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.tableData = this.clientList.slice((val - 1) * 2, val * 2);
        },
        dateFormat(fmt, date) {
            let ret = "";
            date = new Date(date);
            const opt = {
                'Y+': date.getFullYear().toString(), // 年
                'm+': (date.getMonth() + 1).toString(), // 月
                'd+': date.getDate().toString(), // 日
                'H+': date.getHours().toString(), // 时
                'M+': date.getMinutes().toString(), // 分
                'S+': date.getSeconds().toString() // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            }
            for (let k in opt) {
                ret = new RegExp('(' + k + ')').exec(fmt)
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
                    )
                }
            }
            return fmt
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        findClient() {
            findClient().then(res => {
                console.log(res);
                this.clientList = res.data.data;
                // 拿前两条数据
                this.tableData = this.clientList.slice(0, 2);
            })
        },
        // 格式化时间
        dateFormatByEl(date) {
            // date = 2023-7-8 00:00:00月和日小于10的时候，前面加0
            var date1 = date.split(' ')[0].split('-')
            var date2 = date.split(' ')[1]
            var month = date1[1] < 10 ? '0' + date1[1] : date1[1]
            var day = date1[2] < 10 ? '0' + date1[2] : date1[2]
            date = date1[0] + '-' + month + '-' + day + ' ' + date2
            return date
        },
        SearchClient() {
            // 获取时间
            var date = this.form.date.toLocaleString().split('/').join('-').split(',')
            // date = this.dateFormatByEl(date[0])
            // console.log(date);
            findClientBySearch(this.form.input, this.form.phone, this.dateFormatByEl(date[0]), this.dateFormatByEl(date[1])).then(res => {
                console.log(res);
                this.clientList = res.data.data;
            })
        },
    }
}

</script>

<style scoped>
.heade-text {
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
}

.heade-form {
    display: flex;
    position: relative;
    top: 12px;
}

.text1 {
    font-size: 14px;
    position: absolute;
    left: 12px;
}

.text2 {
    font-size: 12px;
    position: absolute;
    left: 100px;
    color: red;
}

.text3 {
    font-size: 12px;
    position: absolute;
    left: 180px;
    color: red;
}

.text4 {
    font-size: 12px;
    position: absolute;
    right: 140px;
    cursor: pointer;
}

.info1 {
    position: absolute;
    right: 120px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 7px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
}

.info {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 1px solid rgba(228, 228, 228, 1) !important;
    width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    margin: -2px 0px;
    border-radius: 4px;
}

.info:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.info1:hover {
    background-color: rgb(220, 238, 255);
    color: rgb(24, 144, 255);
}

.header {
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
    margin-top: 20px;
}

.column {
    font-size: 12px;
    margin-right: 5px;
}
</style>